<template>
  <div class="container">
    <div class="node" ref="cardNode">
      <div id="g-img" ref="imgNode"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardNode: null,
      multiple: 20,
    };
  },
  methods: {
    transformHandle(x, y) {
      let box = this.$refs.cardNode.getBoundingClientRect();
      const calcX = -(y - box.y - box.height / 2) / this.multiple;
      const calcY = (x - box.x - box.width / 2) / this.multiple;
      const percentage = parseInt(((x - box.x) / box.width) * 1000) / 10;

      this.$refs.cardNode.style.transform =
        "rotateX(" + calcX + "deg) " + "rotateY(" + calcY + "deg)";
      this.$refs.imgNode.style = `--per: ${percentage}%`;
    },
  },
  mounted() {
    const mainNode = document.querySelector("body");
    console.log("🚀✨🐅🐆🐘🦏🐋🐳🐬 ~ mounted ~ mainNode:", mainNode);
    console.log(
      "🚀✨🐅🐆🐘🦏🐋🐳🐬 ~ mounted ~ this.$refs.cardNode:",
      this.$refs.cardNode
    );
    mainNode.onmousemove = (e) => {
      window.requestAnimationFrame(() => {
        this.transformHandle(e.clientX, e.clientY);
      });
    };
    mainNode.onmouseleave = (e) => {
      window.requestAnimationFrame(() => {
        this.$refs.cardNode.style.transform = `rotateY(0deg) rotateX(0deg)`;
      });
    };
  },
};
</script>

<style lang='less' scoped>
html,
body,
#app {
  width: 100vw;
  height: 100vh;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  transform-style: preserve-3d;
}
.node {
  margin-top: 100px;
  width: 250px;
  height: 400px;
  background: linear-gradient(45deg, black, deeppink, #6006ff);
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: all 0.1s;
}
#g-img {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("./card.png");
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);

  &::after {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
    mix-blend-mode: color-dodge;
  }

  &::before {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(6, 232, 255, 0.2) var(--per),
      rgba(255, 171, 46, 0.2) calc(var(--per) + 25%),
      rgba(255, 34, 18, 0.2) calc(var(--per) + 50%),
      transparent 100%
    );
    mix-blend-mode: color-dodge;
  }

  &:hover::after,
  &:hover::before {
    display: block;
  }
}
</style>